<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--楼盘数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <div style="margin-bottom: 20px">
            <!-- <el-button type="primary">集中式</el-button>
            <el-button>分散式</el-button> -->
            <el-radio-group v-model="queryParams.estateType" @change="handleQuery">
              <!-- <el-radio-button label="上海"></el-radio-button> -->
              <el-radio-button
                :label="dict.value"
                v-for="dict in dict.type.dict_estate_type"
                :key="dict.value"
                >{{ dict.label }}</el-radio-button
              >
            </el-radio-group>
          </div>
        </div>
        <div class="head-container">
          <el-input
            v-model="buildingsName"
            placeholder="请输入楼盘名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="buildingsOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            :default-expand-all="false"
            highlight-current
            @node-click="handleNodeClick"
            :default-expanded-keys="['0']"
            accordion
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="是否线上" prop="onlineRentalType">
            <el-select
              v-model="queryParams.onlineRentalType"
              placeholder="所有"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.dict_online_rental_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="房型类型" prop="houseType">
            <el-select
              v-model="queryParams.houseType"
              placeholder="所有"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.dict_house_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <!-- <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addRoomDialogVisible = true"
              >新建房间</el-button
            > -->
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="19">
            <div class="type-container">
              <div class="type">
                <div class="type-item" :class="{'active':currentTab == index}" v-for="(item,index) in tabList" :key="index" @click="selectTab(index,item)">
                  <div class="label">{{ item.label }}</div>
                  <div class="data">({{ item.data }})</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="toggle-container">
              <i
                class="icon iconfont icon-card"
                :class="{ active: currentTabComponent == 'ConditionCard' }"
                @click="currentTabComponent = 'ConditionCard'"
              ></i>
              <i
                class="icon iconfont icon-list"
                :class="{ active: currentTabComponent == 'ConditionList' }"
                @click="currentTabComponent = 'ConditionList'"
              ></i>
            </div>
          </el-col>
        </el-row>
        <component
          v-bind:is="currentTabComponent"
          :queryParams="queryParams"
          @showHouse="showHouse"
          ref="currentTabComponent"
        ></component>
      </el-col>
    </el-row>
    <el-drawer
      title="详情"
      :visible.sync="drawer"
      :direction="'rtl'"
      :with-header="true"
    >
      <div class="info">
        <div class="info-item">
          <div class="left"></div>
          <div class="right">操作</div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="name">A栋1单元-102号（123456543）</div>
            <div class="price">¥ 1200.99/月</div>
            <div class="">3室1厅1卫 98m² 普通出租房</div>
          </div>
          <div class="right">
            <div>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >编辑房间</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-delete"
                >删除房间</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-view"
                >查看</el-button
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="name">房间状态</div>
            <div class="">出租状态：<span>已出租</span></div>
          </div>
          <div class="right">
            <div>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >修改状态</el-button
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="name">租约信息</div>
            <div class="">承租人：张女士（13244556677）</div>
            <div class="">收款状态：已收款</div>
            <div class="">租金：¥1234</div>
            <div class="">押金：¥123</div>
            <div class="">租住时间：2023-08-21至2023-09-23</div>
          </div>
          <div class="right">
            <div>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >添加预订</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-delete"
                >办理入住</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-view"
                >取消预订</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-delete"
                >换房</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-view"
                >退租</el-button
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="name">备注</div>
            <div class="">暂无备注</div>
          </div>
          <div class="right">
            <div>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >编辑备注</el-button
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="name">账单信息</div>
            <div class="">账单信息：未付款</div>
            <div class="">账单金额：¥1234</div>
            <div class="">待付金额：¥123</div>
            <div class="">缴费截止日期：2023-08-24</div>
          </div>
          <div class="right">
            <div>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >催缴</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-delete"
                >查看</el-button
              >
            </div>
            <div>
              <el-button size="mini" type="text" icon="el-icon-view"
                >生成账单</el-button
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="name">设备信息</div>
            <div class="">设备状态：正常</div>
            <div class="">设备编号：123456</div>
          </div>
          <div class="right">
            <div>
              <el-button size="mini" type="text" icon="el-icon-edit"
                >查看</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 新增房间弹窗 -->
    <room-add :open="addRoomDialogVisible" v-if="addRoomDialogVisible" @closeeldialog="closeAddRoomDialogVisible"></room-add>
  </div>
</template>

<script>
import { getHouseStatusStatistics } from "@/api/house/condition";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ConditionList from "./components/condition-list.vue";
import ConditionCard from "./components/condition-card.vue";
import roomAdd from "@/views/house/room/component/room-add.vue";

export default {
  name: "Condition",
  dicts: ["dict_online_rental_type", "dict_house_type", "dict_estate_type"],
  components: { Treeselect, ConditionList, ConditionCard,roomAdd },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 楼盘树选项*
      buildingsOptions: [
        {
          children: [],
          id: "0",
          level: 0,
          name: "所有",
          parentId: "",
        },
      ],
      // 楼盘统计数据
      houseStatistics: {},
      //当前选择菜单导航
      currentTab: 0,
      //导航分类列表
      tabList: [
        {
          key: "total",
          label: "全部",
          type: "all",
          value: "",
          data: 0,
        },
        {
          key: "leased",
          label: "已出租",
          type: "houseState",
          value: "1",
          data: 0,
        },
        {
          key: "vacancy",
          label: "空置",
          type: "houseState",
          value: "2",
          data: 0,
        },
        {
          key: "reserved",
          label: "预定",
          type: "houseLeaseState",
          value: "1",
          data: 0,
        },
        {
          key: "fastExpire",
          label: "即将到期",
          type: "houseLeaseState",
          value: "2",
          data: 0,
        },
        {
          key: "overdue",
          label: "逾期",
          type: "houseLeaseState",
          value: "3",
          data: 0,
        },
        {
          key: "arrears",
          label: "欠款",
          type: "houseLeaseState",
          value: "4",
          data: 0,
        },
        {
          key: "lettingOut",
          label: "退租中",
          type: "houseLeaseState",
          value: "5",
          data: 0,
        },
        {
          key: "occupy",
          label: "占用",
          type: "houseMaintainState",
          value: "1",
          data: 0,
        },
        {
          key: "clean",
          label: "清洁",
          type: "houseMaintainState",
          value: "2",
          data: 0,
        },
        {
          key: "repair",
          label: "维修",
          type: "houseMaintainState",
          value: "3",
          data: 0,
        },
      ],
      // 是否显示弹出层
      open: false,
      //是否显示抽屉
      drawer: false,
      // 楼盘名称
      buildingsName: undefined,
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        estateId: "", //楼盘id
        floors: null, //楼层
        buildingId: "", //楼栋id
        unitId: "", //单元id
        estateType: "1", //楼盘分布类型：1.集中式；2.分散式
        onlineRentalType: "", //是否线上出租（0：否；1：是）
        houseType: "", //房型类型：1.普通公寓；2.出租屋；3.学生公寓；4.民宿
        houseState: "", //房间状态：1、已出租；2、空置
        houseLeaseState: "", //房屋租赁状态：1、预定；2、即将到期；3、逾期；4、欠款；5、退租中
        houseMaintainState: "", //房屋维护状态：1、占用；2、清洁；3、维修
      },
      //当前组件
      currentTabComponent: "ConditionCard",
      //添加房间弹窗
      addRoomDialogVisible:false
    };
  },
  watch: {
    // 根据名称筛选部门树
    buildingsName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getHouseStatusStatistics().then((res) => {
        console.log("res", res.data.estateTreeList);
        if (res.code == 200) {
          this.houseStatistics = res.data.houseStatus;
          this.tabList.forEach((item)=>{
            if (Object.hasOwnProperty.call(this.houseStatistics, item.key)) {
              item.data = this.houseStatistics[item.key];
              
            }
          })
          let tree = this.handlefloorData(res.data.estateTreeList);
          this.$set(this.buildingsOptions[0], "children", tree);
        }
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data, node) {
      console.log(data.id);
      this.queryParams.estateId = undefined;
      this.queryParams.buildingId = undefined;
      this.queryParams.unitId = undefined;
      this.queryParams.floors = null;
      let arr = this.getIdList(data.id, this.buildingsOptions);
      // console.log("arr", arr);
      if (arr.length == 1) {
        this.queryParams.estateId = undefined;
        this.queryParams.buildingId = undefined;
        this.queryParams.unitId = undefined;
        this.queryParams.floors = null;
      } else if (arr.length == 2) {
        this.queryParams.estateId = arr[1];
      } else if (arr.length == 3) {
        this.queryParams.estateId = arr[1];
        this.queryParams.buildingId = arr[2];
      } else if (arr.length == 4) {
        this.queryParams.estateId = arr[1];
        this.queryParams.buildingId = arr[2];
        this.queryParams.unitId = arr[3];
      } else if (arr.length == 5) {
        this.queryParams.estateId = arr[1];
        this.queryParams.buildingId = arr[2];
        this.queryParams.unitId = arr[3];
        this.queryParams.floors = arr[4];
      } else {
        this.$modal.msgError("数据错误");
        throw new Error(`错误`);
      }
      console.log("query", this.queryParams);
      this.handleQuery();
    },
    getIdList(id, tree) {
      let arr = [];
      for (let i = 0; i < tree.length; i++) {
        let item = tree[i];
        arr = [];
        arr.push(item.id);
        if (id === item.id) {
          return arr;
        } else {
          if (item.children && item.children.length > 0) {
            arr = arr.concat(this.getIdList(id, item.children));
            if (arr.includes(id)) {
              return arr;
            }
          }
        }
      }
    },
    //处理楼层显示
    handlefloorData(tree) {
      console.log(tree);
      let newTree = [];
      tree.forEach((item) => {
        let obj = {};
        if (item.level < 3 && item.children) {
          this.handlefloorData(item.children);
        } else if (item.level == 3) {
          console.log(item.floors);
          let floorArr = [];
          for (let i = 1; i <= item.floors; i++) {
            let floorObj = {};
            floorObj["id"] = i;
            floorObj["name"] = i;
            floorArr.push(floorObj);
          }
          item["children"] = floorArr;
        }
      });
      return tree;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        status: "0",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.$refs.currentTabComponent.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.estateId = undefined;
      this.queryParams.buildingId = undefined;
      this.queryParams.unitId = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    //展示房屋抽屉
    showHouse(data) {
      console.log("a");
      this.drawer = true;
    },
    //关闭回调
    handleClose(done) {
      done();
    },
    //选择导航菜单
    selectTab(index,item){
      this.currentTab = index
      this.queryParams.houseState = ''
      this.queryParams.houseLeaseState = ''
      this.queryParams.houseMaintainState = ''
      if(index == 0){
        
      }else{
        this.queryParams[item.type] = item.value
      }
      this.handleQuery()
      
    },
    //关闭新增房间弹窗
    closeAddRoomDialogVisible(){
      this.addRoomDialogVisible = false
      // this.handleQuery()
    }
  },
};
</script>
<style lang="scss" scoped>
.type-container {
  display: flex;
  width: 100%;

  .type {
    display: flex;
    flex: 1;
    justify-content: space-around;

    .type-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      font-family:微软雅黑;
      cursor: pointer;
      flex: 1;

      &:nth-child(1),
      &:nth-child(3),
      &:nth-child(8) {
        &::after {
          position: absolute;
          content: "";
          border-right: 1px solid #d7d7d7;
          width: 1px;
          height: 100%;
          right: 0;
        }
      }

      &.active {
        color: #32bbef;
      }
    }
  }
}

.toggle-container {
  display: flex;
  justify-content: flex-end;

  .icon {
    margin: 0 5px;
    font-size: 40px;
    color: #bfbfbf;
    cursor: pointer;

    &.active {
      color: #32bbef;
    }
  }
}

.info {
  .info-item {
    display: flex;
    // border-bottom: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7;

    &:last-child {
      border-bottom: 1px solid #d7d7d7;
    }

    .left {
      padding: 5px 10px;
      width: 70%;
      background: #fff;
      border-right: 1px solid #d7d7d7;

      .name,
      .price {
        font-weight: 600;
        margin: 10px 0;
      }
    }

    .right {
      padding: 5px 10px;
      width: 30%;
      background: #f2f2f2;
    }
  }
}
</style>
